<template>
  <view v-if="open" class="goods-search">
    <text
      class="justify"
      style="
        width: 700rpx;
        background-color: rgba(255, 255, 255, 0.5);
        margin-right: 15rpx;
        border-radius: 50rpx;
        padding-left: 26rpx;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
      "
    >
      <input
        placeholder-class="placeholder-style"
        style="color: #ffffff; width: 580rpx; height: 44rpx; font-size: 28rpx"
        placeholder="请输入内容"
        v-model="searchValue"
        @confirm="handleQuery"
        focus
    /></text>
    <text class="justify" style="width: 80rpx; color: #ffffff" @click="handleQuery">搜索</text>
  </view>
</template>
<script setup lang="ts">
// 获取屏幕边界到安全区域距离

import { onMounted, ref } from 'vue'
// 接收页面参数
const query = defineProps<{
  from: string
  value: string
}>()
const open = ref(false)

const { safeAreaInsets } = uni.getSystemInfoSync()
const searchValue = ref<string>(query.value)
const handleQuery = async () => {
  if (searchValue.value) {
    let url = `/pages/goods/list?searchValue=${searchValue.value}`
    if (query.from === 'goods') {
      uni.redirectTo({
        url: url,
      })
    } else {
      uni.navigateTo({
        url: url,
      })
    }
    searchValue.value = ''
  }
}

// 组件挂载完毕
onMounted(() => {
  open.value = true
  console.log(searchValue.value)
})
</script>

<style lang="scss">
.goods-search {
  padding: 20rpx;
  display: flex;
  background-color: #27ba9b;
  color: #ffffff;

  .justify {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .placeholder-style {
    color: #ffffff;
  }
}
</style>
